<template>
  <div>
    <div v-if="row.actions.length>2">
      <a @click="handleClickMore(row.actions[0].name, row)">{{ row.actions ? row.actions[0].label : '' }}</a>
      <Divider type="vertical" />
      <Dropdown @on-click="(name) => handleClickMore(name, row)"
                transfer>
        <a>更多
          <Icon type="ios-arrow-down" /></a>
        <DropdownMenu slot="list">
          <DropdownItem v-for="(item, i) in row.actions.slice(1)"
                        :key="i"
                        :name="item.name">{{ item.label }}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
    <div v-else>
      <a v-if="row.actions"
         @click="handleClickMore(row.actions[0].name, row)">{{ row.actions[0].label }}</a>
      <Divider v-if="row.actions && row.actions.length>1"
               type="vertical" />
      <a v-if="row.actions && row.actions.length>1"
         @click="handleClickMore(row.actions[1].name, row)">{{ row.actions[1].label }}</a>
    </div>
    <Modal v-model="putInModal"
           title="投放">
      <Form ref="formValidate"
            :model="putIn"
            :rules="ruleValidate"
            :label-width="100">
        <FormItem label="投放方式："
                  prop="interest">
          <CheckboxGroup v-model="putIn.type">
            <Checkbox v-for="(item,index) in type"
                      :key="index"
                      :label="item.label"
                      :value="item.value"></Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem label="投放对象："
                  prop="interest">
          <CheckboxGroup v-model="putIn.object">
            <Checkbox v-for="(item,index) in object"
                      :key="index"
                      :label="item.label"
                      :value="item.value"></Checkbox>
          </CheckboxGroup>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary"
                :loading="aloading"
                @click.stop="putInAgree()">
          <span v-if="!aloading">确认</span>
          <span v-else>Loading...</span>
        </Button>
        <Button type="default"
                :loading="cloading"
                @click.stop="modalClose()">
          <span v-if="!cloading">取消</span>
          <span v-else>Loading...</span>
        </Button>
      </div>
    </Modal>
    <Modal v-model="settingModal"
           title="设置投放渠道">
      <Form ref="formValidate"
            :model="putIn"
            :label-width="100">
        <FormItem label="投放方式："
                  prop="interest">
          <CheckboxGroup v-model="putIn.type">
            <Checkbox v-for="(item,index) in type"
                      :key="index"
                      :label="item.label"
                      :value="item.value"></Checkbox>
          </CheckboxGroup>
        </FormItem>
        <FormItem label="投放对象："
                  prop="interest">
          <CheckboxGroup v-model="putIn.object">
            <Checkbox v-for="(item,index) in object"
                      :key="index"
                      :label="item.label"
                      :value="item.value"></Checkbox>
          </CheckboxGroup>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary"
                :loading="aloading"
                @click.stop="settingAgree()">
          <span v-if="!aloading">确认</span>
          <span v-else>Loading...</span>
        </Button>
        <Button type="default"
                :loading="cloading"
                @click.stop="modalClose()">
          <span v-if="!cloading">取消</span>
          <span v-else>Loading...</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>
<script>
    import { ApiRequest } from '@api/basePage';
    import dynamictableactions from '@/mixins/dynamictableactions'; // 混入通用代码
    export default {
        mixins: [
            dynamictableactions
        ],
        data () {
            return {
                putInModal: false,
                settingModal: false,
                putIn: {
                    type: [],
                    object: []

                },
                type: [{
                    label: '短信提醒',
                    value: '0'
                }, {
                    label: '邮箱提醒',
                    value: '1'
                }, {
                    label: '站内信提醒',
                    value: '2'
                }],
                object: [{
                    label: '商家',
                    value: '0'
                }, {
                    label: '客户',
                    value: '1'
                }, {
                    label: '服务者',
                    value: '2'
                }]
            }
        },
        methods: {
            //  操作更多选择
            handleClickMore (name, row) {
                let obj = {}; // 动作的对象信息
                row.actions.forEach(item => {
                    if (name === item.name) {
                        obj = item;
                        return false;
                    }
                })
                this.setTableRowData(row)
                if (obj.handleType === 'link') { // 操作类型为链接时，拼接参数跳转
                    let jumpPath = this.jumpPath + obj.name;
                    this.$router.push({ path: jumpPath, query: { 'uuid': row.uuid } })
                } else if (obj.handleType === 'confirm') { // 操作类型为confirm时 打开modal弹窗
                    if (name === 'Touf') {
                        this.putIn = {
                            type: [],
                            object: []

                        };
                        this.putInModal = true;
                    }
                    if (name === 'Setting') {
                        this.putIn = {
                            type: [],
                            object: []

                        };
                        this.settingModal = true;
                    }
                } else if (obj.handleType === 'alert') {
                    if (name === 'Prohibit') {
                        this.$Modal.confirm({
                            title: '禁用操作',
                            content: '确定要禁用此消息模板吗？',
                            onOk: () => {
                                let data = {
                                    uuid: row.uuid
                                }
                                // 开始请求商品列表
                                ApiRequest(this.requestApi.toProhibit.url, this.requestApi.toProhibit.type, data).then(res => {
                                    this.$Message.success('该消息模板已经禁用');
                                    this.actionsChange();
                                })
                            }
                        });
                    }
                }
            },
            // 确认投放
            putInAgree () {
                if (this.putIn.type.length <= 0) {
                    this.$Message.error('请选择投放类型!');
                    return false;
                }
                if (this.putIn.object.length <= 0) {
                    this.$Message.error('请选择投放对象!');
                    return false;
                }
                this.aloading = true;
                let data = {
                    type: this.putIn.type,
                    uuid: this.row.uuid,
                    object: this.putIn.object
                }
                // 投放确认
                ApiRequest(this.requestApi.putInAgree.url, this.requestApi.putInAgree.type, data).then(res => {
                    this.aloading = false;
                    this.$Message.success('操作成功');
                    this.putInModal = false;
                    this.actionsChange();
                })
            }, // 设置投放渠道确认
            settingAgree () {
                if (this.putIn.type.length <= 0) {
                    this.$Message.error('请选择投放类型!');
                    return false;
                }
                if (this.putIn.object.length <= 0) {
                    this.$Message.error('请选择投放对象!');
                    return false;
                }
                this.aloading = true;
                let data = {
                    type: this.putIn.type,
                    uuid: this.row.uuid,
                    object: this.putIn.object
                }
                // 投放设置确认
                ApiRequest(this.requestApi.settingAgree.url, this.requestApi.settingAgree.type, data).then(res => {
                    this.aloading = false;
                    this.$Message.success('操作成功');
                    this.settingModal = false;
                    this.actionsChange();
                })
            },
            modalClose () {
                this.putInModal = false;
                this.settingModal = false;
            }
        }
    }
</script>
